<template>
	<div
		class="fixed top-0 left-0 w-screen h-screen text-xl z-20 backdrop-blur-4xl bg-transparent pb-2 overflow-y-auto xl:p-2"
	>
		<!-- 移动端 -->
		<m-navbar sticky v-if="isMobileTerminal">
			{{ pexelData.title }}

			<template #right>
				<m-svg-icon
					name="share"
					class="w-3 h-3"
					fillClass="fill-zinc-900 dark:fill-zinc-200"
				></m-svg-icon>
			</template>
		</m-navbar>

		<!-- PC端 -->
		<m-svg-icon
			v-else
			@click="onPop"
			name="close"
			fillClass="fill-zinc-400"
			class="w-3 h-3 ml-1 p-0.5 cursor-pointer duration-200 rounded-sm hover:bg-zinc-100 absolute right-2 top-2"
		></m-svg-icon>

		<!-- 内容区 -->
		<div
			v-if="pexelData.title"
			class="xl:w-[80%] xl:h-full xl:mx-auto xl:rounded-lg xl:flex"
		>
			<img
				class="w-screen mb-2 xl:w-3/5 xl:h-full xl:rounded-tl-lg xl:rounded-bl-lg"
				:src="pexelData.photo"
				alt=""
			/>
			<div
				class="xl:w-2/5 xl:h-full xl:bg-white xl:dark:bg-zinc-900 xl:rounded-tr-lg xl:rounded-br-lg xl:p-3"
			>
				<!-- PC下：收藏、分享 -->
				<div v-if="!isMobileTerminal" class="flex justify-between mb-2">
					<m-svg-icon
						name="share"
						class="w-4 h-4 cursor-pointer rounded hover:bg-zinc-200 dark:hover:bg-zinc-800"
					></m-svg-icon>
					<m-button
						type="info"
						icon="heart"
						iconClass="fill-zinc-900 dark:fill-zinc-200"
					></m-button>
				</div>

				<!-- 标题、作者 -->
				<p
					class="text-base text-zinc-900 dark:text-zinc-200 font-bold xl:text-xl xl:mb-5"
				>
					{{ pexelData.title }}
				</p>
				<div class="flex items-center py-1">
					<img
						v-lazy
						class="h-3 w-3 rounded-full"
						:src="pexelData.avatar"
						alt=""
					/>
					<span class="text-base text-zinc-900 dark:text-zinc-200 ml-1">{{
						pexelData.author
					}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getPexlesFromId } from '@/api/pexels'
import { isMobileTerminal } from '@/utils/flexible.js'
import { useStore } from 'vuex'

const props = defineProps({
	id: String,
})

const pexelData = ref({})
const getPexelData = async () => {
	pexelData.value = await getPexlesFromId(props.id)
}

getPexelData()

const store = useStore()
const router = useRouter()
const onPop = () => {
	store.commit('app/changeRouteType', 'back')
	router.back()
}
</script>

<style scoped lang="scss"></style>
